s<template>
	<view style="padding: 40rpx;">
		<view style="padding: 20rpx; margin: 80rpx 0; background-color: #fff; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.1); border-radius: 10rpx;">
			<view style="margin: 50rpx 30rpx; font-size: 40rpx;">欢迎登录</view>
			<uni-forms ref="form" :modelValue="form" :rules="rules" validateTrigger='blur'>
				<uni-forms-item name="username" required>
					<uni-easyinput prefixIcon="person" v-model="form.username" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput type="password" prefixIcon="locked" v-model="form.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item>
					<button @click="login()" style="background-color: #6cf; border-color: #ffd100; height: 70rpx; line-height: 70rpx;">登 录</button>
				</uni-forms-item>
			
				<checkbox-group class="modeBtn" @change="selectSearchMode">
					<label class="mode-label">
	
					    <checkbox :value="0" :checked="check" @click="changeLogin" >我已阅读<navigator style="display: inline-block; color: dodgerblue; 
								          margin-left: 4rpx;" url="/pages/agreement/agreement">用户协议
						</navigator></checkbox>
					</label>
				</checkbox-group>
				
				<uni-forms-item>
			
					<view style="text-align: center;">还没有账号？去 
						<navigator style="display: inline-block; color: dodgerblue; 
								          margin-left: 4rpx;" url="/pages/register/register">注册
						</navigator>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import isLogin from '@/isLogin.js';
	export default {
		data() {
			return {
				check:isLogin.ifChecked,
				form: {
					username:'',
					password:''
				},
				rules: {
					// 对username字段进行必填验证
					username: {
						// username 字段的校验规则
						rules:[
							// 校验 username 不能为空
							{
								required: true,
								errorMessage: '请输入账号',
							},
							// 对username字段进行长度验证
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
					},
					password: {
						rules:[
							{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
					}
				}
			}
		},
		methods: {
			login() {
				if(isLogin.ifChecked === true){
				uni.request({
					url: config.baseUrl + '/users/login',
					data: this.form,
					method:'POST',
					
					success(res){
						console.log(res);
						
						if ( res.data.code === 200 ) {
							
							uni.setStorageSync('xm-user', res.data.data);
							console.log(uni.getStorageSync('xm-user'));
							uni.showToast({
								icon: 'success',
								title: '登录成功'
							});
							
							isLogin.ifLogin = true;
							

							// 跳转主页
							uni.switchTab({
								url: '/pages/my/my'
							});
						} else {
							uni.showToast({
								icon: 'error',
								title: '账号或密码错误'
							})
						}
									
					},
					fail(res){
						console.log(res.errMsg);
						uni.showToast({
							icon:'error',
							title:'服务器异常'
						})
					}
					
				})
			}else{
				uni.showToast({
					icon:'error',
					title:'请阅读用户协议'
				});
				
		
			}
			},
			
			changeLogin(){
				isLogin.ifChecked = !isLogin.ifChecked;
			}
		},
	}
</script>

<style>
	.modeBtn{
		display: flex;
		padding: 15px;
		justify-content: space-around;
	}
	
</style>
